<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre id="rabbit">
    |\   /|
     \|_|/
     /. .\
    =\_Y_/=
     {>o<}
  </pre
		>
		<button onclick="hide()">Hide()</button>

		<script>
			function hide() {
				// 1. 创建自定义事件
				const event = new CustomEvent('hideEvent', {
					cancelable: true, // 阻止默认行为（这个为 true，才可以在自定义事件中调用 preventDefault() 方法）
				})

				// 2. 给 rabbit 分发自定义事件
				if (!rabbit.dispatchEvent(event)) {
					alert('该操作被处理程序阻止!')
				} else {
					rabbit.hidden = true
				}
			}

			// 3. 触发分发给 rabbit 的自定义事件（使用 dispatchEvent 这类事件将会被立即处理。所以上面分发后，就会立即来执行这里的代码）
			rabbit.addEventListener('hideEvent', (event) => {
				if (confirm('阻止默认行为?')) {
					event.preventDefault() // 阻止默认行为（调用这个方法后，rabbit.dispatchEvent(event) 结果会返回 false）
				}
			})
		</script>
	</body>
</html>
